<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/echarts.js"></script>
    <%--echartjs--%>
    <script src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/echarts-liquidfill.min.js"></script>
    <%--地图--%>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch"></script>
</head>


<body>
    <div class="container">
        <%--顶部导航--%>
        <div class="nav-area">
            <div class="nav-left">
                <a href="/airPassengerFlow.do">&lt; 客流分布概况</a>
            </div>
            <div class="nav-center">
                <h1>航展交通运输服务及指挥调度平台</h1>
            </div>
            <div class="nav-right">
                <a href="/airRidePoints.do">乘车点概况 &gt;</a>
            </div>
        </div>

        <%--滚动信息--%>
        <div class="message-area">
            <ul class="roll__list">
            </ul>
        </div>

        <%--核心展示区--%>
        <div class="main-area show-big">

            <%--左侧--%>
            <div class="main-left-area">
                <%--当日检票--%>
                <div class="main-lefttop-area public-box">
                    <div class="public-box-title">
                        当日检票
                    </div>
                    <div class="main-lefttop-chart" id="checkChart">
                        <div class="main-lefttop-chart-bg">
                        </div>
                    </div>
                    <ul class="main-lefttop-data">
                       <li>
                           <span id="appoint-tickets">0</span>
                           <em>制证总数</em>
                           <%--<em>总票数</em>--%>
                       </li>
                        <li>
                            <span class="main-color" id="checked-tickets">0</span>
                            <em>已检票</em>
                            <%--<em>已检票</em>--%>
                        </li>
                    </ul>
                </div>
                <%--乘车人数--%>
                <div class="main-leftbottom-area public-box">
                    <div class="public-box-title">
                        乘车人数
                    </div>
                    <div class="main-leftbottom-box">
                        <ul class="main-leftbottom-data">
                            <li>
                                <span class="main-color" id="tookSum"></span>
                                <em>已乘车人数</em>
                            </li>
                            <li>
                                <span id="appointSum"></span>
                                <em>预约人数</em>
                            </li>
                        </ul>
                        <ul class="main-leftbottom-list scroll-box" id="dtoList_left">
                            <c:forEach items="${dataMap.airRidePointDtoList}" var="dto">
                                <li class="list-box">
                                    <div class="list-title">
                                        <span class="list-title-name show-pointinfo" data-pointid="${dto.airRidePoint.id}">${dto.airRidePoint.route>0?dto.airRidePoint.route:''} ${dto.airRidePoint.name}</span>
                                        <span class="list-title-data">
                                            <em class="main-color">${dto.tookSum}</em> / ${dto.appointSum}
                                        </span>
                                    </div>
                                    <div class="list-chart">
                                        <c:choose>
                                            <c:when test="${dto.appointSum}>0">
                                        <div class="list-chart-bar" style="width: ${(Math.round(dto.tookSum/dto.appointSum * 10000)/ 100.00)>100?100:(Math.round(dto.tookSum/dto.appointSum * 10000))}%;"></div>
                                            </c:when>
                                            <c:otherwise>
                                        <div class="list-chart-bar" style="width: ${dto.tookSum>0?100:0}%;"></div>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>

            <%--地图--%>
            <div class="main-center-area">
                <div class="main-center-options">
                    <div class="center-options-left">
                        <div class="new-select" id="layerSelect">
                            <span>市内路况图</span>
                            <ul>
                                <li data-type="layer" data-id="1">
                                    市内路况图
                                </li>
                                <li data-type="layer" data-id="2">
                                    专线迁徙图
                                </li>
                            </ul>
                        </div>
                        <div class="new-select" id="pointSelect" style="width: 250px;">
                            <span>显示全部乘车点</span>
                            <ul>
                                <li data-type="point" data-id="">
                                    显示全部乘车点
                                </li>
                                <c:forEach items="${dataMap.airRidePointDtoList}" var="dto">
                                    <c:if test="${dto.airRidePoint.airParkingLot.name !=null}">
                                    <li data-type="point" data-id="${dto.airRidePoint.id}">
                                        <img class="car_color" data-id="${dto.airRidePoint.route}" >${dto.airRidePoint.route>0?dto.airRidePoint.route:''} ${dto.airRidePoint.name}
                                    </li>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                        <div class="new-select" id="moveSelect" style="display: none">
                            <span>全部乘车点</span>
                            <ul>
                                <%--<li data-type="move" data-id="1">--%>
                                    <%--全部乘车点--%>
                                <%--</li>--%>
                                <li data-type="move" data-id="2">
                                    市内乘车点
                                </li>
                                <li data-type="move" data-id="3">
                                    直达城市
                                </li>
                            </ul>
                        </div>
                        <!--
                        <div class="new-select" id="workerSelect" >
                            <span>隐藏工作人员</span>
                            <ul>
                                <li data-type="worker" data-id="1">
                                    隐藏工作人员
                                </li>
                                <li data-type="worker" data-id="2">
                                    显示工作人员
                                </li>
                            </ul>
                        </div>
                        -->
                    </div>
                </div>
                <%--核心地图--%>
                <div class="main-center-map" id="container">
                </div>
                <%--地图标示--%>
                <div class="center-map-mark">
                    <div class="mark-box">
                        路况：畅通
                        <em style="background: #96db86"></em>
                        <em style="background: #fff89e"></em>
                        <em style="background: #f96322"></em>
                        <em style="background: #cb2b26"></em> 拥堵
                    </div>
                    <br/>
                    <div class="mark-box">
                        乘车点：
                        <span>
                            <img src="../../images/label_blue_point.png"> 正常
                        </span>
                        <span>
                            <img src="../../images/label_yellow_point.png"> 轻微滞留
                        </span>
                        <span>
                            <img src="../../images/label_red_point.png"> 严重滞留
                        </span>
                    </div>
                </div>
                <%--伸缩按钮--%>
                <button class="extend-btn" id="showBtn"><</button>
            </div>

            <%--候车人数--%>
            <div class="main-right-area public-box show-small">
                <div class="public-box-title">
                    候车人数
                </div>
                <div class="main-right-box">
                    <div class="main-right-data">
                        <span class="main-color" id="waitingSum"></span>
                        <em>人</em>
                    </div>
                    <ul class="main-right-list scroll-box" id="dtoList_right">
                        <c:forEach items="${dataMap.airRidePointDtoList}" var="dto">
                            <c:if test="${dto.airRidePoint.waitingSum>0}">
                            <li class="wait-li" data-num="${dto.airRidePoint.waitingSum}">
                                <div class="wait-chart" title="候车超过${dto.airRidePoint.serRetention}人，为严重滞留">
                                    <div class="wait-chart-bar" style="width: ${Math.round(dto.airRidePoint.waitingSum/dto.airRidePoint.serRetention * 10000)/ 100.00}%"></div>
                                </div>
                                <p class="show-pointinfo" data-pointid="${dto.airRidePoint.id}">${dto.airRidePoint.route>0?dto.airRidePoint.route:''} ${dto.airRidePoint.name}</p>
                                <p>
                                    <span>候车<em>${dto.airRidePoint.waitingSum}</em>人</span>
                                    <span>当前运力<em>${dto.takerSum==null?0:dto.takerSum}</em>座</span>
                                </p>
                            </li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <%@ include file="common.jsp" %>
    <script src="/js/airDispatch.js" type="text/javascript"></script>
    <script src="/js/service.js" type="text/javascript"></script>
    <script>

        var car_color = [
            "images/bus/hong_bus.png",
            "images/bus/huang_bus.png",
            "images/bus/lv_bus.png",
            "images/bus/qing_bus.png",
            "images/bus/lan_bus.png",
            "images/bus/zi_bus.png",
            "images/bus/fen_bus.png",
            "images/bus/zong_bus.png",
            "images/bus/sl_bus.png",
            "images/bus/hui_bus.png"];
        var show = true;

        //火狐浏览器下改变窗体样式
        changeMainRightCss();
        changeMainLeftCss();
        function changeMainRightCss(){
            if (navigator.userAgent.indexOf("Firefox") >= 0){
                var $box = $(".main-right-list"),
                    boxH = $box.outerHeight(),
                    $li = $(".wait-li"),
                    liH = $li.length * $li.eq(0).outerHeight();
                if(boxH<liH){
                    $box.attr("style","margin-right:-18px;");
                }
                else {
                    $box.attr("style","margin-right:0");
                }
            }
        }
        function changeMainLeftCss(){
            if (navigator.userAgent.indexOf("Firefox") >= 0){
                var $box = $(".main-leftbottom-list"),
                    boxH = $(".main-left-area").outerHeight() - 340 - 60 - $(".main-leftbottom-data").outerHeight(),
                    $li = $(".list-box"),
                    liH = $li.length * ( $li.eq(0).outerHeight() + 24 ) - 24;
                console.log(boxH,liH);
                if(boxH<liH){
                    $box.attr("style","margin-right:-18px;max-height:" + boxH + "px");
                }
                else {
                    $box.attr("style","margin-right:0;max-height:" + boxH + "px");
                }
            }
        }

        //窗体变化时内容适配
        $(window).resize(function(){
            changeMainRightCss();
            changeMainLeftCss();
        });

        $(function () {

            //初始化地图
            airDispatch.initView();

            //下拉选择
            $(document).on("click",".main-center-area .new-select li",function () {
                var optionType = $(this).data("type"),
                        optionVal = $(this).data("id");
                var newHtml = $(this).html();
                $(this).closest("ul").prev("span").html(newHtml);
                if( optionType == "layer") changeLayerMap(optionVal);
                if( optionType == "point") {
                    current_point_id = optionVal;
                    changePointMap(optionVal);
                }
                if( optionType == "move") {
                    current_move_id = optionVal;
                    changeMoveMap(optionVal);
                }
//                if( optionType == "worker") changeWorkerMap(optionVal);
            });

            $(".car_color").each(function (index,obj) {
                $(this).attr("src",car_color[ $(this).data("id")-1]);
            })

            //模块伸缩
            $("#showBtn").click(function(){
                if(show){
                    $(".main-area").removeClass("show-big");
                    $(".main-right-area").removeClass("show-small");
                    changeMainRightCss();
                    if(airDispatch.echartMap != null){
                        airDispatch.echartMap.resize();
                    }
                    show = false;
                    $(this).text(">");
                }
                else {
                    $(".main-area").addClass("show-big");
                    $(".main-right-area").addClass("show-small");
                    if(airDispatch.echartMap != null){
                        airDispatch.echartMap.resize();
                    }
                    show = true;
                    $(this).text("<");
                }
            })

        });

        //切换图层地图展示
        function changeLayerMap(layerId) {
            console.log(layerId);
            if (layerId == '1') {
                console.log("查看市内路况图");
                airDispatch.switchView1();
            }
            if (layerId == '2') {
                console.log("查看迁徙图");
                airDispatch.switchView2();
            }
        }

        //切换乘车点地图展示
        function changePointMap(pointId) {
            console.log("改变乘车点地图"+pointId);
            showMarkers();
        }

        //切换迁徙地图展示
        function changeMoveMap(moveId) {
            console.log("改变迁徙地图"+moveId);
            airDispatch.echartMap.setOption(getEchartOption(moveId));
        }
//        var show_worker = true;
        /*
        //是否展示工作人员
        function changeWorkerMap(is_show){
            if(is_show=='1'){
                if(current_point_id == ''){
                    for(var w in workers){
                        for(var a in workers[w]){
                            workers[w][a].setMap(null);
                        }
                    }
                }else {
                    for(var w in workers[current_point_id]){
                        workers[current_point_id][w].setMap(null);
                    }
                }
                show_worker = true;
            }else {
                if(current_point_id == ''){
                    for(var w in workers){
                        for(var a in workers[w]){
                            workers[w][a].setMap(map);
                        }
                    }
                }else {
                    for(var w in workers[current_point_id]){
                        workers[current_point_id][w].setMap(map);
                    }
                }
                show_worker = false;
            }
        }
        */
    </script>

</body>
</html>